<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态表格.时间线</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body {
            margin: 20px;
        }
    </style>
</head>
<body>
<table class="layui-table" lay-even lay-skin="nob" lay-size="lg">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>蜡笔小新</td>
        <td>xiaoxin@163.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>樱桃小丸子</td>
        <td>wanzi@163.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>孙悟空</td>
        <td>wukong@163.com</td>
    </tr>
    <tr>
        <td>4</td>
        <td>辉夜</td>
        <td>huiye@163.com</td>
    </tr>
    </tbody>
</table>

<br>

<ul class="layui-timeline">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">10月28日</h3>
            <p>这是一段故事~</p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">10月27日</h3>
            <p>这是一段故事~</p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">10月26日</h3>
            <p>这是一段故事~</p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-icon-circle layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">到底了</h3>
        </div>
    </li>
</ul>

<script src="../layui/layui.js"></script>
</body>
</html>
